import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

export default function Home() {
  return (
    <main className="container mx-auto py-10 px-4">
      <div className="text-center mb-10">
        <h1 className="text-4xl font-bold mb-4">PostgreSQL学习平台</h1>
        <p className="text-xl text-muted-foreground">
          通过实际操作学习SQL，无需安装任何软件
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
        <Card>
          <CardHeader>
            <CardTitle>学习路径</CardTitle>
            <CardDescription>
              从基础到高级的结构化学习路径
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p>按照我们精心设计的学习路径，从创建表开始，逐步掌握复杂的SQL查询。</p>
          </CardContent>
          <CardFooter>
            <Button asChild className="w-full">
              <Link href="/learn">开始学习</Link>
            </Button>
          </CardFooter>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>SQL操作场</CardTitle>
            <CardDescription>
              自由练习SQL查询
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p>在这里可以自由编写和执行SQL查询，测试你的想法，无需担心破坏数据库。</p>
          </CardContent>
          <CardFooter>
            <Button asChild className="w-full">
              <Link href="/playground">进入操作场</Link>
            </Button>
          </CardFooter>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>SQL参考</CardTitle>
            <CardDescription>
              PostgreSQL语法参考
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p>查阅PostgreSQL的语法参考，包括常用命令、函数和操作符的详细说明。</p>
          </CardContent>
          <CardFooter>
            <Button asChild className="w-full">
              <Link href="/reference">查看参考</Link>
            </Button>
          </CardFooter>
        </Card>
      </div>
    </main>
  );
}
